<template>
  <div class="app">
    <Category cateTitle="美食">
      <template slot="cb">
        <span>各种美食应有尽有</span>
      </template>
    <template slot="ct">
      <img :src="foodUrl" alt="">
    </template>
    </Category>
    <Category cateTitle="游戏">
      <template slot="cb">
        <ul>
          <li>游戏种类大全</li>
          <li>破解工具多</li>
          <li>汉化版本全</li>
        </ul>
      </template>
    <template slot="ct">
      <ul>
        <li v-for="g in gameArr" :key="g.id">{{ g.name }}</li>
      </ul>
    </template>
    </Category>
    <Category cateTitle="电影">
      <template slot="cb">
        <span>各种电影应有尽有</span>
      </template>
      <template slot="ct">
        <video :src="movieUrl" controls></video>
      </template>

    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";

export default {
  name: "App",
  data() {
    return {
      foodUrl: 'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
      gameArr: [
        {id: '001', name: '扑克'},
        {id: '002', name: '王者荣耀'},
        {id: '003', name: '斗地主'}
      ],
      movieUrl: 'https://v-cdn.zjol.com.cn/277002.mp4'
    }
  },
  components: {Category}
}
</script>

<style scoped>
.app {
  display: flex;
  justify-content: space-around;
}

img {
  width: 100%;
}

video {
  width: 100%;
}
</style>